<template>
  <div class="login">
    <div class="logo">
      <img src="../assets/logo.png" alt="">
    </div>
    <!-- <div class="title">
      速冻在线<br>供应商平台
    </div> -->
    <group label-width="70px">
      <x-input title="用户名" :max="13" required placeholder="请输入用户名" v-model="username"></x-input>
    </group>
    <group label-width="70px">
      <x-input title="手机号码" :max="13" required placeholder="请输入手机号码" v-model="username"></x-input>
    </group>
    <group label-width="70px">
      <x-input title="密码" required placeholder="请输入密码" type="password" v-model="password"></x-input>
    </group>
    <group label-width="70px">
      <x-input title="确认密码" required placeholder="请再次输入密码" type="password" v-model="password"></x-input>
    </group>
    <div class="remanber">
      <x-button class="sub_btn" type="primary" @click.native="register">注册</x-button>
    </div>
  </div>
</template>

<script>
import { XInput, Group, XButton} from "vux";
import router from "../router";
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    register() {
      var that = this
      if(this.username==''){
        that.$vux.toast.show({
          text:'用户名不能为空',
          type:'warn'
        })
        return
      }
      if(this.password==''){
        that.$vux.toast.show({
          text:'密码不能为空',
          type:'warn'
        })
        return
      }
    }
  },
  components: {
    XInput,
    Group,
    XButton
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.logo {
  background-color: white;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
  margin: 20px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  img {
    width: 85%;
  }
}
// .title {
//   text-align: center;
//   font-size: 24px;
// }
.remanber {
  padding: 20px 15px;
  .sub_btn {
    margin-bottom: 10px;
  }
}
</style>
